<template>
	<view class="page">
		<view class="head">
			<view class="job-personal-auth-navbar">
				<view class="job-personal-auth-navbar-back" @click="$back">
					<u-icon name="arrow-left" color="#ffffff" label="返回" labelSize="26rpx" labelColor="#ffffff"></u-icon>
				</view>
				<view class="job-personal-auth-navbar-advantage"  @click="oberlayShow = true">
					优势认证
				</view>
			</view>
			<view class="job-personal-auth-avatar">
				<view class="job-personal-auth-avatar-contnet">
					<!-- <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="110" height="110">
						<u--image src="/static/job/name_qy.jpg" mode="widthFix" width="110rpx" height="110rpx" shape="circle"></u--image>
					</u-upload> -->
					<u-avatar :src="personalInfo.personalAvatarUrl" shape="circle" size="110rpx"></u-avatar>
					<view class="job-personal-auth-text">
						<text>个人认证</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="body">
			<view class="job-personal-form">
				<view class="job-personal-form-item">
					<view class="job-personal-from-item-title">
						姓　　名<text>*</text>
					</view>
					<view class="job-personal-from-item-input">
						<u--input
						    placeholder="请输入姓名"
							v-model="personalInfo.personalName"
						    border="none"
							placeholderStyle="color:#999999"
						    @blur="checkTextContent"
						  ></u--input>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				
				<view class="job-personal-form-item">
					<view class="job-personal-from-item-title">
						联系电话<text>*</text>
					</view>
					<view class="job-personal-from-item-input">
						<u--input
						    placeholder="请输入联系电话"
							v-model="personalInfo.personalPhone"
							type="number"
						    border="none"
							placeholderStyle="color:#999999"
						    @blur="checkTextContent"
						  ></u--input>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>				
				
				<view class="job-personal-form-item-column">
					<view class="job-personal-form-item-column-title">
						身份证正面照<text>*</text>
					</view>
					<view class="job-personal-form-item-column-upload">
						<uni-file-picker
							limit="1"
							disable-preview
							v-model="personalInfo.personalPositiveUrl"
							fileMediatype="image"
							mode="grid"
							:imageStyles="imageStyles"
							ref="personalPositiveUrl"
							@select="personalPositiveUrlSelect()"
							@delete="personalPositiveUrlDelete()"
						>
						<image src="/static/job/positive.jpg" mode="widthFix" style="width: 200px;"></image>
						</uni-file-picker>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				
				
				<view class="job-personal-form-item-column">
					<view class="job-personal-form-item-column-title">
						身份证反面照<text>*</text>
					</view>
					<view class="job-personal-form-item-column-upload">
						<uni-file-picker
							limit="1"
							disable-preview
							v-model="personalInfo.personalBackUrl"
							fileMediatype="image"
							mode="grid"
							:imageStyles="imageStyles"
							:listStyles="listStyles"
							ref="personalBackUrl"
							@select="personalbackUrlSelect()"
							@delete="personalbackUrlDelete()"
						>
						<image src="/static/job/back.jpg" mode="widthFix" style="width: 200px;"></image>
						</uni-file-picker>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				
				<view class="job-personal-form-item-column">
					<view class="job-personal-form-item-column-title">
						个人介绍<text>*</text>
					</view>
					<view class="job-personal-form-item-column-input">
						<u--textarea v-model="personalInfo.personalContent" placeholder="个人介绍" border="none" placeholderStyle="color#999999" @blur="checkTextContent"></u--textarea>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				
				<view class="job-personal-form-submit">
					<view class="job-personal-form-submit-button" @click="infoSubmit()">
						确认提交
					</view>
				</view>
			</view>
		</view>
		<view class="bottom u-safe-bottom u-safe-area-inset-bottom">
			
		</view>
		
		<u-overlay :show="oberlayShow" @click="oberlayShow = false">
				<view class="oberlay-warp">
					
					<view class="oberlay-rect "><u-parse :content="advantage"></u-parse></view>
				</view>
			</u-overlay>
		
		<!-- 全局message组件 -->
		<QuickMessage ref="message"></QuickMessage>
		<wl-modal ref="wlModal"  :cancelFunction="getPhoneNumber"></wl-modal>
	</view>
</template>

<script>
import wlModal from '@/components/wl-modal/wl-modal.vue';
import QuickMessage from '@/components/quick-message/quick-message.vue';
	export default {
		data() {
			return {
				oberlayShow: false,	// 认证优势是否显示 
				advantage: '',	// 认证优势
				imageStyles: {
					width: '400rpx',
					height: '240rpx',
					border: {
						width: '0rpx',
					}
				},
				personalInfo: {
					personalAvatarUrl: uni.getStorageSync('globaUserInfo').avatarUrl, // 个人头像
					personalName:	'',	// 个人姓名
					personalPhone: '',	// 个人电话
					personalPositiveUrl: [],	// 身份证正面图片
					personalBackUrl: [],	// 身份证背面图片
					personalContent: '', // 个人简介
				},
				isSubmit: true,	// 是否可以提交
				infoParams: { openid: getApp().globalData.openid, cid: getApp().globalData.cityId }, // 传递参数组合对象
			}
		},
		onLoad() {
			// this.getJobPhoneBind()
			this.getJobPersonalAuthentication()
		},
		onShow() {
			// this.showGetPhoneNumber()
		},
		methods: {
			getJobPhoneBind() {
				this.$api.getJobPhoneBind({openid: getApp().globalData.openid}).then(res => {
					console.log(res)
				})
			},
			getJobPersonalAuthentication() {
				this.$api.getJobPersonalAuthentication({ openid: getApp().globalData.openid }).then(res => {
					console.log(res.data);
					// 认证优势
					this.advantage = res.data.Content
					// 头像
					this.personalInfo.personalAvatarUrl = this.$getImgUrl(res.data.TxImg)
					// 姓名
					this.personalInfo.personalName = res.data.Name
					// 联系电话
					this.personalInfo.personalPhone = res.data.Phone
					// 个人简介
					this.personalInfo.personalContent = res.data.Content2
					// 身份证正面
					this.personalInfo.personalPositiveUrl.push({
										name: res.data.IDPic1.slice(res.data.IDPic1.lastIndexOf('/') + 1),
										extname: res.data.IDPic1.slice(res.data.IDPic1.length - 3),
										url: res.data.IDPic1,
										// url: this.$getImgUrl(res.data.IDPic1),
							}) 
					// 身份证背面
					this.personalInfo.personalBackUrl.push({
										name: res.data.IDPic2.slice(res.data.IDPic2.lastIndexOf('/') + 1),
										extname: res.data.IDPic2.slice(res.data.IDPic2.length - 3),
										url: res.data.IDPic2,
										// url: this.$getImgUrl(res.data.IDPic2),
							})					
				})
				
			},
			
			// 个人身份证正面管理
			personalPositiveUrlSelect(e) {
				// 审核选择图片
				this.checkImgReview(e.tempFilePaths[0]).then(res => {
					if (!res) {
						this.showMessage('error', '图片违规，自动删除', 'center');
						this.$refs.personalPositiveUrl.clearFiles(-1);
					} else {
						this.uploadPersonalPicture(e.tempFilePaths[0]).then(res => {
							this.personalInfo.personalPositiveUrl.push(...[{
										name: res.Pic,
										extname: e.tempFiles[0].extname,
										url: this.$getImgUrl(res.Imgpath),
							}])
						})
						console.log('personalPositiveUrl：', this.personalInfo.personalPositiveUrl)
					}
				});
			},
			personalPositiveUrlDelete(e) {
				let index = this.personalInfo.personalPositiveUrl.findIndex(item => item.url == e.tempFilePath);
				this.personalInfo.personalPositiveUrl.splice(index, 1);
				
			},
			
			// 个人身份证背面管理
			personalbackUrlSelect(e) {
				// 审核选择图片
				this.checkImgReview(e.tempFilePaths[0]).then(res => {
					if (!res) {
						this.showMessage('error', '图片违规，自动删除', 'center');
						this.$refs.personalBackUrl.clearFiles(-1);
					} else {
						this.uploadPersonalPicture(e.tempFilePaths[0]).then(res => {
							this.personalInfo.personalBackUrl.push(...[{
										name: res.Pic,
										extname: e.tempFiles[0].extname,
										url: this.$getImgUrl(res.Imgpath),
							}])
						})
						console.log('personalBackUrl:', this.personalInfo.personalBackUrl)
					}
				});
			},
			personalbackUrlDelete(e) {
				let index = this.personalInfo.personalBackUrl.findIndex(item => item.url == e.tempFilePath);
				this.personalInfo.personalBackUrl.splice(index, 1);
			},		
			// 上传图片进行审核
			checkImgReview(tempFilePath) {
				// console.log(tempFilePath[0])
				uni.showLoading({
					title: '上传中'
				});
				return this.$api
					.uploadPictureReview({
						params: {} /* 会加在url上 */,
						// #ifdef APP-PLUS || H5
						// files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
						// #endif
			
						// #ifdef MP-ALIPAY
						fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
						// #endif
			
						filePath: tempFilePath, // 要上传文件资源的路径。
						name: 'file_img', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
			
						// #ifdef H5 || APP-PLUS
						timeout: 3000 // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
						// #endif
					})
					.then(res => {
						uni.hideLoading();
						if (res.errcode == 0) {
							return true;
						} else {
							return false;
						}
					});
			},
			// 上传图片
			uploadPersonalPicture(tempFilePath) {
				return this.$api.uploadCompanyAuthenticationPicture({
					params: {} /* 会加在url上 */,
					// #ifdef APP-PLUS || H5
					// files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
					// #endif
			
					// #ifdef MP-ALIPAY
					fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
					// #endif
			
					filePath: tempFilePath, // 要上传文件资源的路径。
					name: 'imgurl', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					// #ifdef H5 || APP-PLUS
					timeout: 3000 // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
					// #endif
			
					// header: {}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
					// custom: {}, // 自定义参数
					// formData: {xxid:infoId}, // HTTP 请求中其他额外的 form data
					// // 返回当前请求的task, options。请勿在此处修改options。非必填
					// getTask: (task, options) => {
					//   // setTimeout(() => {
					//   //   task.abort()
					//   // }, 500)
					// }
				})
					.then(res => {
						uni.hideLoading();
						// console.log(res);
						return res.data
						// resolve(res);
					})
					// .catch(err => {
					// 	uni.hideLoading();
					// 	console.log(err);
					// 	reject(err);
					// });
			},
			// 文字审核
			checkTextContent(value) {
						// console.log(value)
						if (value.length > 0) {
							this.$api.checkTextContent({ filewz: value }).then(res => {
								if (res.errcode != 0) {
									this.showMessage('error', '文字内容违规，请修改文字内容', 'center');
								}
							});
						}
					},
			
			infoSubmit() {
				this.isSubmit = true;
			
				// 判断姓名是输入为空
				if (this.personalInfo.personalName == '') {
					this.showMessage('warning', '请填写姓名', 'center');
					this.isSubmit = false;
					return;
				} else {
					// 组合企业名称参数
					this.infoParams['Name'] = this.personalInfo.personalName
				}
				
				// 判断联系电话是否为空
				if (this.personalInfo.personalPhone == '') {
					this.showMessage('warning', '请填写联系电话', 'center');
					this.isSubmit = false;
					return;
				} else {
					// 组合联系电话参数
					this.infoParams['Phone'] = this.personalInfo.personalPhone
				}
								
				// 判断是否上传身份证正面
				if(this.personalInfo.personalPositiveUrl.length == 0) {
					this.showMessage('warning', '请上传身份证正面', 'center');
					this.isSubmit = false;
					return
				} else {
					// 组合身份证正面参数
					this.infoParams['IDPic1'] = this.personalInfo.personalPositiveUrl[0].url
				}
				
				// 判断是否上传身份证背面
				if(this.personalInfo.personalBackUrl.length == 0) {
					this.showMessage('warning', '请上身份证背面', 'center');
					this.isSubmit = false;
					return
				} else {
					// 组合企业身份证背面参数
					this.infoParams['IDPic2'] = this.personalInfo.personalBackUrl[0].url
				}
				
				// 判断个人介绍是否为空
				if (this.personalInfo.personalContent == '') {
					this.showMessage('warning', '请填写个人介绍', 'center');
					this.isSubmit = false;
					return;
				} else {
					// 组合公司介绍参数
					this.infoParams['Content'] = this.personalInfo.personalContent
				}
				// console.log(this.infoParams);
				
				this.$api.postJobPersonalAuthentication(this.infoParams).then(res => {
					uni.$u.route('/pages/jobMe/jobMe')
				})
				
			},		
			
			showGetPhoneNumber: function(e) {
					this.$refs.wlModal.showModal({
						title: '绑定手机号', // 提示标题
						content: '为了更好的服务于您，需要绑定您的手机号', // 提示内容
						cancelText: '绑定手机', // 取消按钮的文字
						confirmText: '手动绑定', // 确认按钮文字
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#3CC51F', // 确定按钮颜色
						cancelColor: '#c70109', // 取消按钮颜色
						textAlign: 'center', // 对齐方式
						confirmOpenType: '', // 确定按钮open-type
						cancelOpenType: 'getPhoneNumber', // 取消按钮open-type
						success: res => {
							console.log(res);
							if (res.confirm) {
								uni.showToast({
									title: '点击了确定',
									icon: 'none',
									duration: 2000
								});
							} else {
								this.getPhoneNumber();
								uni.showToast({
									title: '点击了取消',
									icon: 'none',
									duration: 2000
								});
							}
						} // 回调方法
					});
				},
			getPhoneNumber: function(e) {
					// 方法通过绑定自定义属性方式传给子组件
					// this.visible = false;// 用于关闭对话框
					console.log('getPhoneNumber',e);
					if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
						console.log('用户点击了拒绝');
					} else {
						console.log(JSON.stringify(e.detail.encryptedData));
						console.log(JSON.stringify(e.detail.iv));
						this.visible = false; // 用于关闭对话框
					}
				},
				showMessage(type, title, direction) {
					//显示message
					this.$refs.message.show({
						type: type, //默认default
						msg: title, //显示内容
						icon: true, //显示icon
						mask: false, //遮罩
						time: 3000, //显示时间
						direction: direction //方向
					});
					let id = this.$refs.message.id; //获取弹窗id,需要在弹出后获取
					setTimeout(() => {
						this.$refs.message.close(id); //关闭某个弹窗
					}, 3000);
					// if(this.messageData.time===false){
					// 	if(this.messageData.mask){
					// 		this.$refs.message.show({
					// 			type:'warning',
					// 			msg:'注意!! 当前遮罩已开启,不可点击,为了方便测试这里设置了10秒后关闭当前消息,你也可以关闭指定某个消息,详情查看说明文档及demo.',
					// 			time:10000
					// 		})
					// 		setTimeout(()=>{
					// 			this.$refs.message.close(id); //关闭某个弹窗
					// 		},10000)
					// 	}
					// }
				}

		},
		components: {
			QuickMessage,
			wlModal,
		},
	}
</script>

<style lang="scss" scoped>
@import url('jobMyPersonalAuth.css');
</style>
